<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0052: MVC V – A ComboBox with Integers | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0052: MVC V – A ComboBox with Integers" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Tutorial on creating a ComboBox with integers." />
<meta property="og:description" content="Tutorial on creating a ComboBox with integers." />
<link rel="canonical" href="http://localhost:4000/posts/0052-mvc-v-int-combobox.html" />
<meta property="og:url" content="http://localhost:4000/posts/0052-mvc-v-int-combobox.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-07-12T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0052: MVC V – A ComboBox with Integers" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-07-12T00:00:00-04:00","datePublished":"2019-07-12T00:00:00-04:00","description":"Tutorial on creating a ComboBox with integers.","headline":"0052: MVC V – A ComboBox with Integers","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0052-mvc-v-int-combobox.html"},"url":"http://localhost:4000/posts/0052-mvc-v-int-combobox.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/mvc.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-07-12T00:00:00-04:00" itemprop="datePublished">Friday, July 12, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h2 id="0052-mvc-v--a-combobox-with-integers">0052: MVC V – A ComboBox with Integers</h2>

<p>This time around, we’re going to change things up in two ways:</p>

<ul>
  <li>the <code class="language-plaintext highlighter-rouge">ListStore</code> will have two columns, but only one will be visible in the <code class="language-plaintext highlighter-rouge">ComboBox</code>, and</li>
  <li>we’ll be displaying integers instead of text in the <code class="language-plaintext highlighter-rouge">ComboBox</code>.</li>
</ul>

<h3 id="a-two-column-liststore">A Two-column ListStore</h3>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/017_mvc/mvc_07.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/017_mvc/mvc_07_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/017_mvc/mvc_07_combobox_int_2_column.d" target="_blank">here</a>.
	</div>
</div>

<p>I talked about the two-column <code class="language-plaintext highlighter-rouge">ListStore</code> in <a href="">the introduction to this series</a> and touched on the requirements for <code class="language-plaintext highlighter-rouge">ListStore</code>s in general <a href="">last time</a>, but here’s a brief review…</p>

<p>A <code class="language-plaintext highlighter-rouge">ListStore</code> needs:</p>

<ul>
  <li>data to stuff into rows, and</li>
  <li>an array of data types, one for each column.</li>
</ul>

<p>So what we did last time, we just do it twice to get two columns. And what’s the second column for if we don’t see it in the <code class="language-plaintext highlighter-rouge">ComboBox</code>? Whatever extra data you may want to have associated with the items that do show. Here’s the <code class="language-plaintext highlighter-rouge">DayListStore</code> class:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">DayListStore</span> <span class="p">:</span> <span class="n">ListStore</span>
<span class="p">{</span>
	<span class="nb">string</span><span class="p">[]</span> <span class="n">days</span> <span class="p">=</span> <span class="p">[</span><span class="s">"Sunday"</span><span class="p">,</span><span class="s">"Monday"</span><span class="p">,</span> <span class="s">"Tuesday"</span><span class="p">,</span> <span class="s">"Wednesday"</span><span class="p">,</span> <span class="s">"Thursday"</span><span class="p">,</span> <span class="s">"Friday"</span><span class="p">,</span> <span class="s">"Saturday"</span><span class="p">];</span>
	<span class="kt">int</span><span class="p">[]</span> <span class="n">dayNumbers</span> <span class="p">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span><span class="p">];</span>
	<span class="n">GType</span><span class="p">[]</span> <span class="n">columnTypes</span> <span class="p">=</span> <span class="p">[</span><span class="n">GType</span><span class="p">.</span><span class="n">STRING</span><span class="p">,</span> <span class="n">GType</span><span class="p">.</span><span class="n">INT</span><span class="p">];</span>
	<span class="n">TreeIter</span> <span class="n">treeIter</span><span class="p">;</span>
	<span class="kt">int</span> <span class="n">dayColumn</span> <span class="p">=</span> <span class="mi">0</span><span class="p">,</span> <span class="n">numberColumn</span> <span class="p">=</span> <span class="mi">1</span><span class="p">;</span>

	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="nb">string</span> <span class="n">day</span><span class="p">;</span>
		<span class="kt">int</span> <span class="n">number</span><span class="p">;</span>
		
		<span class="k">super</span><span class="p">(</span><span class="n">columnTypes</span><span class="p">);</span>
		
		<span class="k">foreach</span><span class="p">(</span><span class="kt">ulong</span> <span class="n">i</span><span class="p">;</span> <span class="mf">0.</span><span class="p">.</span><span class="n">days</span><span class="p">.</span><span class="n">length</span><span class="p">)</span>
		<span class="p">{</span>
			<span class="n">day</span> <span class="p">=</span> <span class="n">days</span><span class="p">[</span><span class="n">i</span><span class="p">];</span>
			<span class="n">number</span> <span class="p">=</span> <span class="n">lettersInDays</span><span class="p">[</span><span class="n">i</span><span class="p">];</span>
			
			<span class="n">treeIter</span> <span class="p">=</span> <span class="n">createIter</span><span class="p">();</span>
			<span class="n">setValue</span><span class="p">(</span><span class="n">treeIter</span><span class="p">,</span> <span class="n">dayColumn</span><span class="p">,</span> <span class="n">day</span><span class="p">);</span>
			<span class="n">setValue</span><span class="p">(</span><span class="n">treeIter</span><span class="p">,</span> <span class="n">numberColumn</span><span class="p">,</span> <span class="n">number</span><span class="p">);</span>
		<span class="p">}</span>

	<span class="p">}</span> <span class="c1">// this()</span>

<span class="p">}</span> <span class="c1">// class DayListStore</span>
</code></pre></div></div>

<p>We have three arrays in the initialization section:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">days</code> - our string data,</li>
  <li><code class="language-plaintext highlighter-rouge">dayNumbers</code> – the integer data, and</li>
  <li><code class="language-plaintext highlighter-rouge">columnTypes</code> – an array of <code class="language-plaintext highlighter-rouge">GType</code> data types.</li>
</ul>

<p>The constructor is pretty much the same as before except that in the <code class="language-plaintext highlighter-rouge">foreach()</code> loop we extract a bit of data from each of the two data arrays and make the call to <code class="language-plaintext highlighter-rouge">setValue()</code> twice, once for each column.</p>

<h3 id="the-daycombobox">The DayComboBox</h3>

<p>In the initialization section of the <code class="language-plaintext highlighter-rouge">DayComboBox</code>, we have:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">DayComboBox</span> <span class="p">:</span> <span class="n">ComboBox</span>
<span class="p">{</span>
	<span class="k">private</span><span class="p">:</span>
	<span class="kt">bool</span> <span class="n">entryOn</span> <span class="p">=</span> <span class="kc">false</span><span class="p">;</span>
	<span class="n">DayListStore</span> <span class="n">_dayListStore</span><span class="p">;</span>
	<span class="n">CellRendererText</span> <span class="n">cellRendererText</span><span class="p">;</span>
	<span class="kt">int</span> <span class="n">visibleColumn</span> <span class="p">=</span> <span class="mi">1</span><span class="p">;</span>
	<span class="kt">int</span> <span class="n">activeItem</span> <span class="p">=</span> <span class="mi">0</span><span class="p">;</span>
</code></pre></div></div>

<p>A couple of things I’ll point out here…</p>

<p>First…</p>

<p>Even though the data in our <code class="language-plaintext highlighter-rouge">ListStore</code> is integers, we’re using a <code class="language-plaintext highlighter-rouge">CellRendererText</code>. We follow through in the initialization section where we declare it:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">CellRendererText</span> <span class="n">cellRendererText</span><span class="p">;</span>
</code></pre></div></div>

<p>And in these three lines from the constructor where we instantiate it, pack it into the <code class="language-plaintext highlighter-rouge">ComboBox</code>, and deal with the attributes:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">cellRendererText</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CellRendererText</span><span class="p">();</span>
<span class="n">packStart</span><span class="p">(</span><span class="n">cellRendererText</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="n">addAttribute</span><span class="p">(</span><span class="n">cellRendererText</span><span class="p">,</span> <span class="s">"text"</span><span class="p">,</span> <span class="n">visibleColumn</span><span class="p">);</span>
</code></pre></div></div>

<p>Second…</p>

<p>In the initialization section, the <code class="language-plaintext highlighter-rouge">visibleColumn</code> variable is set to <code class="language-plaintext highlighter-rouge">1</code>, not <code class="language-plaintext highlighter-rouge">0</code> as it was before. This is where the decision is made as to which column is shown in the <code class="language-plaintext highlighter-rouge">ComboBox</code>.</p>

<p>And if you look at those lines from the constructor, you’ll see that <code class="language-plaintext highlighter-rouge">addAttribute()</code> is where the visible column is set.</p>

<p>The rest of the constructor is the same and the callback is almost identical except that it calls an extra function to write to the terminal. Because there’s nothing remarkable about it, I’ll leave you to explore it on your own if you’re so inclined.</p>

<h2 id="conclusion">Conclusion</h2>

<p>And that’s how to use integers in a <code class="language-plaintext highlighter-rouge">ComboBox</code>. Join us next time for a peek into the mysteries of <code class="language-plaintext highlighter-rouge">ComboBox</code>es with images.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0051-mvc-iv-combobox-text.html">Previous: ComboBox with Text</a>
	</div>
	<div style="float: right;">
		<a href="./0053-mvc-vi-image-combobox.html">Next: ComboBox with Images</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0052-mvc-v-int-combobox.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
